<template>
  <div class="select-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>
        选中值：{{ select2 }}<i class="d-split"></i><d-button size="s" @click="update2()">修改值</d-button>
      </p>
      <div v-width="300">
        <d-select v-model="select2" :datas="param2"></d-select>
      </div>
      <p>
        根据内容自适应长度，选中值：{{ select3 }}<i class="d-split"></i><d-button size="s" @click="update3()">修改值</d-button>
      </p>
      <div v-width="300">
        <d-select v-model="select3" :datas="param3" autosize></d-select>
      </div>
      <p>
        自定义key, title字段名：{{ select4 }}<i class="d-split"></i><d-button size="s" @click="update4()">修改值</d-button>
      </p>
      <div v-width="300">
        <d-select v-model="select4" :datas="param4" keyName="code" titleName="name"></d-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selectDemo',
  data () {
    return {
      select: null,
      param: ['选择1', '选择2', '选择3'],
      select2: null,
      param2: [{ title: '选择0', key: 0 }, { title: '禁用选择', key: 1, disabled: true }, { title: '选择1', key: 'a1' },
        { title: '选择2', key: 'a2' }, { title: '选择3', key: 'a3' }],
      select3: null,
      param3: { 0: '选择0', a1: '选择1', a2: '选择2', a3: '选择33333333' },
      select4: null,
      param4: [{ name: '选择0', code: 0 }, { name: '选择1', code: 'a1', other: '其他值' }, { name: '选择2', code: 'a2' },
        { name: '选择3', code: 'a3' }]
    }
  },
  methods: {
    update () {
      this.select = '选择2'
    },
    update2 () {
      this.select2 = 'a2'
    },
    update3 () {
      this.select3 = 'a3'
    },
    update4 () {
      this.select4 = 0
    }
  }
}
</script>

<style lang="stylus" scoped>
// .select-demo
</style>
